<div class="d-flex flex-column-reverse flex-sm-row h-100" (drop)="defaultDrop($event)"
     (dragover)="defaultDragOver($event)" (dragenter)="defaultDragEnter($event)" (dragleave)="defaultDragLeave($event)">
  <nav class="d-flex flex-row flex-sm-column bg-panel border-end" #appNav>
    <ul class="nav nav-pills flex-row flex-nowrap flex-sm-column me-auto mb-sm-auto w-100 justify-content-evenly">
      <li class="nav-item">
        <a class="nav-link" routerLink="apps" routerLinkActive="active" replaceUrl ngbTooltip="Apps"
           [placement]="appNavTooltipDirection">
          <i class="bi bi-grid"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="files" routerLinkActive="active" replaceUrl ngbTooltip="Files"
           [placement]="appNavTooltipDirection">
          <i class="bi bi-folder"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="terminal" routerLinkActive="active" replaceUrl ngbTooltip="Terminal"
           [placement]="appNavTooltipDirection">
          <i class="bi bi-terminal"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="info" routerLinkActive="active" replaceUrl ngbTooltip="Info"
           [placement]="appNavTooltipDirection">
          <i class="bi bi-info-circle"></i>
        </a>
      </li>
      <li class="nav-item d-none d-sm-block">
        <a class="nav-link" routerLink="debug" routerLinkActive="active" replaceUrl ngbTooltip="Debug"
           [placement]="appNavTooltipDirection">
          <i class="bi bi-bug"></i>
        </a>
      </li>
      <li class="nav-item d-block d-sm-none">
        <a class="nav-link" routerLink="nav-more" routerLinkActive="active" replaceUrl ngbTooltip="More"
           [placement]="appNavTooltipDirection">
          <i class="bi bi-three-dots"></i>
        </a>
      </li>
    </ul>

    <ul class="nav flex-column mb-sm-2 d-none d-sm-block">
      <li class="nav-item" ngbDropdown placement="auto">
        <a class="nav-link" ngbDropdownToggle>
          <i class="bi bi-gear"></i>
        </a>
        <div ngbDropdownMenu>
          <a ngbDropdownItem routerLink="devices" replaceUrl>Devices</a>
        </div>
      </li>
    </ul>
  </nav>

  <main role="main" class="flex-fill ms-sm-auto p-0 overflow-auto">
    <router-outlet></router-outlet>
  </main>
</div>
